import {CCard} from '@/components/card'
import {IconImg} from '@/components/image'
import {CnBoldP, CnNormalP, CnMediumP, CnNormalSpan} from '@/components/text'

const ContactUs = defineComponent({
  setup(props, ctx) {
    return () => (
      <div class='aboutUs'>
        <CnBoldP class='mt-11 text-20 rounded-4'>联系客服</CnBoldP>

        <CnNormalP class='mt-6 mb-20 text-4xText'>
          服务，是恒蓝一贯秉承的经营目标，为客户服务，为社会服务。
        </CnNormalP>

        <CCard title='关于我们' showTitle={false} class='bg-white'>
          <div class='px-18'>
            <CnNormalP class='mb-14 text-xText'>
              服务，是口碑的基石，是品牌的脊梁，是我们的原则。
            </CnNormalP>
            <div class='grid 2xl:grid-cols-3 xl:grid-cols-3 lg:grid-cols-3 md:grid-cols-3 sm:grid-cols-3  gap-x-14 gap-y-14 mb-28'>
              <div class='w-full h-186 bg-gray'></div>
              <div class='w-full h-186 bg-gray'></div>
              <div class='w-full h-186 bg-gray'></div>
            </div>

            <div class='flex items-start mb-34'>
              <div class='flex items-center gap-x-6'>
                <IconImg imgName='service-phone' class='w-24 h-24'></IconImg>
                <CnNormalSpan class='text-16 text-xText'>客服电话：</CnNormalSpan>
              </div>
              <div class=''>
                <CnNormalP class='mb-8 text-16 text-xText'>0571-88087777</CnNormalP>
                <CnNormalP class='text-16 text-xText'>135 8827 5199</CnNormalP>
              </div>
            </div>

            <div class='flex items-start mb-66'>
              <div class='flex items-center gap-x-6'>
                <IconImg imgName='service-workTime' class='w-24 h-24'></IconImg>
                <CnNormalSpan class='text-16 text-xText'>工作时段：</CnNormalSpan>
              </div>
              <div class=''>
                <CnNormalP class='mb-8 text-16 text-xText'>周一 -- 周五 08:30-18:00 </CnNormalP>
                <CnNormalP class='text-16 text-xText'>周六 9:00-17:30</CnNormalP>
              </div>
            </div>

            <CnMediumP class='text-20 mb-153'>恒蓝云，竭诚为您服务，您的满意，我的心意！</CnMediumP>
          </div>
        </CCard>
      </div>
    )
  }
})

export default ContactUs
